<template>
  <div class="car-register-info">
    <el-card header="基本信息">
      <el-row>
        <el-col :span="6"><span>运输任务编号：</span>{{ orderInfo.transportTaskId }}</el-col>
        <el-col :span="6"><span>车牌号码：</span>{{ orderInfo.licensePlate }}</el-col>
        <el-col :span="6"><span>起始地机构：</span>{{ orderInfo.startAgencyName }}</el-col>
        <el-col :span="6"><span>目的地机构：</span>{{ orderInfo.endAgencyName }}</el-col>
        <el-col :span="6"><span>出车时间：</span>{{ orderInfo.outStorageTime }}</el-col>
        <el-col :span="6"><span>回车时间：</span>{{ orderInfo.intoStorageTime }}</el-col>
        <el-col :span="6"><span>司机：</span>{{ orderInfo.driverName }}</el-col>
      </el-row>
    </el-card>
    <el-card header="异常信息">
      <el-row>
        <el-col :span="8"><span>车辆故障：</span>{{ orderInfo.isFault?'是':'否' }}</el-col>
        <el-col :span="8"><span>车辆违章：</span>{{ orderInfo.isBreakRules?'是':'否' }}</el-col>
        <el-col :span="8"><span>车辆事故：</span>{{ orderInfo.isAccident?'是':'否' }}</el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getReturnOrder } from '@/api/transit'
export default {
  data() {
    return {
      orderInfo: {}
    }
  },
  created() {
    this.initReturnOrder()
  },
  methods: {
    async initReturnOrder() {
      this.orderInfo = await getReturnOrder(this.$route.query.id)
    }
  }

}
</script>

<style lang="scss" scoped>
.car-register-info{
  ::v-deep .el-card{
    margin: 12px;
    .el-card__header{
      color: #2a2929;
      font-size: 16px;
      font-weight: 700;
      background-color: #f8faff;
    }
    .el-row{
      .el-col{
        margin: 8px 0;
        color: #818693;
        font-size: 12px;
        span{
          font-size: 14px;
          color: #20232a;
        }
      }
    }
  }
}
</style>
